<template>
	<view class="detail-container">
		<!-- 帖子内容 -->
		<view class="post-content">
			<view class="post-header">
				<image class="avatar" :src="post.author.avatar" mode="aspectFill"></image>
				<view class="author-info">
					<text class="author-name">{{ post.author.name }}</text>
					<text class="post-time">{{ post.createTime }}</text>
				</view>
				<view class="follow-btn" @click="followAuthor">
					{{ post.author.isFollowing ? '已关注' : '+ 关注' }}
				</view>
			</view>
			
			<view class="post-body">
				<text class="post-title" v-if="post.title">{{ post.title }}</text>
				<text class="post-text">{{ post.content }}</text>
				<view class="post-images" v-if="post.images && post.images.length">
					<image 
						v-for="(img, index) in post.images" 
						:key="index"
						:src="img"
						mode="widthFix"
						@click="previewImage(post.images, index)"
					></image>
				</view>
				<view class="post-category">
					<text class="category-tag"># {{ post.category }}</text>
				</view>
			</view>
			
			<view class="post-footer">
				<view class="action-item" @click="toggleLike">
					<text class="iconfont" :class="post.isLiked ? 'icon-like-filled' : 'icon-like'">
						{{ post.isLiked ? '❤️' : '🤍' }}
					</text>
					<text class="count">{{ post.likes }}</text>
				</view>
				<view class="action-item">
					<text class="iconfont icon-comment">💬</text>
					<text class="count">{{ post.comments }}</text>
				</view>
				<view class="action-item" @click="sharePost">
					<text class="iconfont icon-share">↗️</text>
					<text class="count">{{ post.shares }}</text>
				</view>
			</view>
		</view>
		
		<!-- 评论区 -->
		<view class="comments-section">
			<view class="section-title">
				评论 {{ post.comments }}
			</view>
			
			<view class="comments-list">
				<view 
					class="comment-item" 
					v-for="(comment, index) in comments" 
					:key="index"
				>
					<image class="avatar" :src="comment.author.avatar" mode="aspectFill"></image>
					<view class="comment-content">
						<view class="comment-header">
							<text class="author-name">{{ comment.author.name }}</text>
							<text class="comment-time">{{ comment.createTime }}</text>
						</view>
						<text class="comment-text">{{ comment.content }}</text>
						<view class="comment-footer">
							<view class="like-btn" @click="likeComment(index)">
								<text class="iconfont" :class="comment.isLiked ? 'icon-like-filled' : 'icon-like'">
									{{ comment.isLiked ? '❤️' : '🤍' }}
								</text>
								<text class="count">{{ comment.likes }}</text>
							</view>
							<view class="reply-btn" @click="replyComment(comment)">
								回复
							</view>
						</view>
						
						<!-- 回复列表 -->
						<view class="replies-list" v-if="comment.replies && comment.replies.length">
							<view 
								class="reply-item"
								v-for="(reply, replyIndex) in comment.replies"
								:key="replyIndex"
							>
								<text class="reply-author">{{ reply.author.name }}</text>
								<text class="reply-text">{{ reply.content }}</text>
							</view>
							<text class="view-more" v-if="comment.replies.length >= 3">
								查看更多回复 >
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部评论框 -->
		<view class="comment-bar">
			<input 
				class="comment-input"
				v-model="commentText"
				:placeholder="replyTo ? `回复 ${replyTo}` : '说点什么..'"
				:focus="showCommentInput"
				@blur="onCommentBlur"
			/>
			<view 
				class="send-btn" 
				:class="{ active: commentText.trim() }"
				@click="submitComment"
			>发送</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			postId: null,
			commentText: '',
			showCommentInput: false,
			replyTo: '',
			post: {
				author: {
					name: '小美',
					avatar: '/static/images/avatar1.jpg',
					isFollowing: false
				},
				title: '今天的约会太开心了！',
				content: '和喜欢的人一起去看了电影，吃了美食，漫步在街头，感觉整个世界都在发光...',
				images: [
					'/static/images/post1.jpg',
					'/static/images/post2.jpg',
					'/static/images/post3.jpg'
				],
				category: '情感',
				createTime: '10分钟前',
				likes: 128,
				comments: 32,
				shares: 16,
				isLiked: false
			},
			comments: [
				{
					author: {
						name: '小明',
						avatar: '/static/images/avatar2.jpg'
					},
					content: '祝福你们！看起来真的很般配呢～',
					createTime: '8分钟前',
					likes: 12,
					isLiked: false,
					replies: [
						{
							author: { name: '小美' },
							content: '谢谢你！'
						},
						{
							author: { name: '小张' },
							content: '好浪漫啊！'
						}
					]
				},
				{
					author: {
						name: '小红',
						avatar: '/static/images/avatar3.jpg'
					},
					content: '推荐一家很不错的餐厅，下次可以去试试～',
					createTime: '5分钟前',
					likes: 8,
					isLiked: false,
					replies: []
				}
			]
		}
	},
	onLoad(options) {
		this.postId = options.id
		// TODO: 根据postId获取帖子详情
	},
	methods: {
		followAuthor() {
			this.post.author.isFollowing = !this.post.author.isFollowing
			uni.showToast({
				title: this.post.author.isFollowing ? '已关注' : '已取消关注',
				icon: 'none'
			})
		},
		toggleLike() {
			this.post.isLiked = !this.post.isLiked
			this.post.likes += this.post.isLiked ? 1 : -1
		},
		sharePost() {
			uni.showActionSheet({
				itemList: ['分享到朋友圈', '复制链接', '举报'],
				success: (res) => {
					uni.showToast({
						title: '分享成功',
						icon: 'none'
					})
				}
			})
		},
		likeComment(index) {
			const comment = this.comments[index]
			comment.isLiked = !comment.isLiked
			comment.likes += comment.isLiked ? 1 : -1
		},
		replyComment(comment) {
			this.replyTo = comment.author.name
			this.showCommentInput = true
		},
		onCommentBlur() {
			this.showCommentInput = false
			this.replyTo = ''
		},
		submitComment() {
			if (!this.commentText.trim()) return
			
			const newComment = {
				author: {
					name: '我',
					avatar: '/static/images/my-avatar.jpg'
				},
				content: this.commentText,
				createTime: '刚刚',
				likes: 0,
				isLiked: false,
				replies: []
			}
			
			this.comments.unshift(newComment)
			this.post.comments++
			this.commentText = ''
			this.replyTo = ''
			
			uni.showToast({
				title: '评论成功',
				icon: 'success'
			})
		},
		previewImage(urls, current) {
			uni.previewImage({
				urls: urls,
				current: urls[current]
			})
		}
	}
}
</script>

<style lang="scss">
.detail-container {
	min-height: 100vh;
	background: #f5f6f7;
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	
	.post-content {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.post-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.author-info {
				flex: 1;
				
				.author-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
					display: block;
				}
				
				.post-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.follow-btn {
				font-size: 24rpx;
				color: #ff6b6b;
				padding: 8rpx 20rpx;
				border: 2rpx solid #ff6b6b;
				border-radius: 30rpx;
				
				&.following {
					color: #999;
					border-color: #999;
				}
			}
		}
		
		.post-body {
			.post-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 16rpx;
				display: block;
			}
			
			.post-text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				margin-bottom: 20rpx;
				display: block;
			}
			
			.post-images {
				image {
					width: 100%;
					border-radius: 12rpx;
					margin-bottom: 20rpx;
				}
			}
			
			.post-category {
				margin-bottom: 20rpx;
				
				.category-tag {
					font-size: 24rpx;
					color: #ff6b6b;
					background: rgba(255, 107, 107, 0.1);
					padding: 8rpx 20rpx;
					border-radius: 20rpx;
				}
			}
		}
		
		.post-footer {
			display: flex;
			padding-top: 20rpx;
			border-top: 2rpx solid #f5f6f7;
			
			.action-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.iconfont {
					font-size: 36rpx;
					color: #999;
					margin-right: 8rpx;
					
					&.icon-like-filled {
						color: #ff6b6b;
					}
				}
				
				.count {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
	
	.comments-section {
		background: #fff;
		padding: 30rpx;
		
		.section-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 30rpx;
		}
		
		.comments-list {
			.comment-item {
				display: flex;
				margin-bottom: 30rpx;
				
				.avatar {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				
				.comment-content {
					flex: 1;
					
					.comment-header {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;
						
						.author-name {
							font-size: 26rpx;
							font-weight: 500;
							color: #333;
							margin-right: 12rpx;
						}
						
						.comment-time {
							font-size: 24rpx;
							color: #999;
						}
					}
					
					.comment-text {
						font-size: 26rpx;
						color: #666;
						line-height: 1.6;
						margin-bottom: 12rpx;
					}
					
					.comment-footer {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;
						
						.like-btn {
							display: flex;
							align-items: center;
							margin-right: 30rpx;
							
							.iconfont {
								font-size: 28rpx;
								color: #999;
								margin-right: 6rpx;
								
								&.icon-like-filled {
									color: #ff6b6b;
								}
							}
							
							.count {
								font-size: 24rpx;
								color: #999;
							}
						}
						
						.reply-btn {
							font-size: 24rpx;
							color: #999;
						}
					}
					
					.replies-list {
						background: #f8f9fa;
						border-radius: 12rpx;
						padding: 16rpx;
						
						.reply-item {
							font-size: 24rpx;
							color: #666;
							margin-bottom: 12rpx;
							
							.reply-author {
								color: #333;
								font-weight: 500;
								margin-right: 8rpx;
							}
						}
						
						.view-more {
							font-size: 24rpx;
							color: #999;
							display: block;
							margin-top: 8rpx;
						}
					}
				}
			}
		}
	}
	
	.comment-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #f5f6f7;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		
		.comment-input {
			flex: 1;
			height: 72rpx;
			background: #f5f6f7;
			border-radius: 36rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			margin-right: 20rpx;
		}
		
		.send-btn {
			font-size: 28rpx;
			color: #999;
			padding: 12rpx 30rpx;
			
			&.active {
				color: #ff6b6b;
			}
		}
	}
}
</style> 